<template>
	<view class="grid  bg-white" :class="['col-'+props.count,menuBorder?'sm-border':'',menuCard?'card-menu ':'']">
		<view class="margin-0 flex justify-center padding-sm" v-for="(item,index) in list" :key="index" :data-index="index"
			:data-value="item" @click="handleSelect">
			<view class="text-center">
				<view :class="'cuIcon-'+item.cuIcon+' text-'+item.color+' '+iconStyle"></view>
				<view class="text-black text-size-30">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		useSettingStore
	} from '@/stores/index';
	import {
		watch,
		computed,
		ref
	} from "vue";
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const props = defineProps({
		menuBorder: {
			type: [Boolean, String],
			default: false
		},
		menuCard: {
			type: [Boolean, String],
			default: false
		},
		menuArrow: {
			type: [Boolean, String],
			default: false
		},
		iconStyle:{
			type:String,
			default: "size-42"
		},
		list: {
			default:()=>{
				return [
					{
						cuIcon:'',
						name:'',
						value:0,
						unit:'',
						color:''
					}
				]
			}
		},
		count:{
			type: [Number, String],
			default: 4
		}
	})
	const handleSelect = (e) => {
		emit('action', e)
	}
</script>

<style>
	.grid{
		border-radius: 6rpx;
	}
</style>
